<!-- 
* @desc:消息管理接受设置弹窗
* @fileName:Operation.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-5-24
!-->
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
// // 接受父组件传回
// const props = defineProps({
// });

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
// 表单数据
const ruleForm = reactive({
  acceptObject: [],
  roles: [],
  role: [],
  channel: [],
});
const labelPosition = ref("top");
//定义校验规则
const rules = reactive<FormRules>({
  acceptObject: [
    {
      required: true,
      type: "array",
      message: "请选择接受对象",
      trigger: "change",
    },
  ],
  channel: [
    {
      required: true,
      type: "array",
      message: "请选择接受渠道",
      trigger: "change",
    },
  ],
});

//提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 提交表单
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {});
</script>

<template>
  <div class="operation">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      :label-position="labelPosition"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
    >
      <el-form-item label="接受对象" prop="acceptObject">
        <el-checkbox-group v-model="ruleForm.acceptObject">
          <div class="ml20">
            <el-checkbox class="second-title" label="角色设置" />
            <div class="ml20">
              <el-radio-group class="all-roles" v-model="ruleForm.role">
                <div class="last-title">
                  <el-radio :label="3">所有角色</el-radio>
                </div>
                <div class="last-title">
                  <el-radio :label="6">角色1</el-radio>
                  <div class="selecte-roles ml20 last-title">
                    <el-checkbox-group v-model="ruleForm.roles">
                      <el-checkbox label="运维工程师" />
                      <el-checkbox label="数据工程师" />
                      <el-checkbox label="组织管理员" />
                    </el-checkbox-group>
                  </div>
                </div>
              </el-radio-group>
            </div>
          </div>
          <div class="ml20 mt10">
            <el-checkbox class="second-title" label="事件源的创建人" />
          </div>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="接受渠道" prop="channel">
        <!-- 接受渠道 -->
        <el-checkbox-group class="ml20 last-title" v-model="ruleForm.channel">
          <el-checkbox label="系统消息" />
          <el-checkbox label="邮件" />
          <el-checkbox label="短信" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item class="ClickButton">
        <el-button @click="submitForm(ruleFormRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style>
.el-dialog__header {
  border-bottom: 1px solid #dedede;
  margin-right: 0;
}
</style>
<style scoped lang="scss">
.mt10{
  margin-top: 10px;
}
.last-title{
  :deep(.el-radio__label){
    color:rgba($color: #000000, $alpha:0.5);
  }
  :deep(.el-checkbox__label){
    color:rgba($color: #000000, $alpha:0.5);
  }
}
.second-title{
  :deep(.el-checkbox__label){
    font-size: 14px!important;
    color:rgba(61, 61, 61, 1)!important;
  }
}
:deep(.el-form-item__label){
  color:rgba(61, 61, 61, 1)!important;
  font-size: 16px!important;
  font-weight: 500!important;
}
.el-checkbox-group {
  width: 100%;
}
.selecte-roles {
  background-color: #f2f2f6;
  height: 55px;
  line-height: 55px;
  width: 93%;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.ml20 {
  margin-left: 20px;
}
.all-roles {
  display: block !important;
}
:deep(.el-form-item__label) {
  font-family: PingFang SC;
  font-weight: 700;
  color: #000000;
  font-size: 14px;
}
:deep(.el-input) {
  height: 40px;
  background-color: #ffffff;
}
:deep(.el-textarea) {
  height: 100px;
  background-color: #ffffff;
  .el-textarea__inner {
    height: 100px;
  }
}
.ClickButton {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: flex-end;
    .el-button {
      height: 40px;
      background-color: #ffffff;
      border: 1px solid;
      border-color: #cccccc;
    }
  }
}
</style>
